<template>
  <el-form label-width="80px" :model="formData" :rules="formRules" label-position="left" size="small">
    <el-collapse v-model="activeCollapse">
      <el-collapse-item title="基础" name="base">
        <el-form-item label="标签" prop="__config__.label">
          <el-input v-model="formData.__config__.label" />
        </el-form-item>
        <el-form-item label="数据字段" prop="__config__.model">
          <el-input v-model="formData.__config__.model" />
        </el-form-item>
        <el-form-item label="字段说明" prop="modelDesc">
          <el-input v-model="formData.__config__.modelDesc" />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="样式" name="style">
        <el-form-item label="栅格宽度" prop="span">
          <el-slider v-model="formData.__config__.span" :step="2" :min="6" :max="24" show-stops />
        </el-form-item>
        <el-form-item label="标签宽度" prop="labelWidth">
          <el-input-number
            v-model="formData.__config__.labelWidth"
            :min="0"
            :max="1000"
            controls-position="right"
          />
          <span class="ml-10px">px</span>
        </el-form-item>
        <el-form-item label="填充宽度" prop="width">
          <el-input v-model="formData.__config__.width" />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="属性" name="property">
        <el-form-item label="默认值" prop="defaultValue">
          <el-input v-model="formData.__attr__.defaultValue" />
        </el-form-item>
        <el-form-item label="输入提示" prop="placeholder">
          <el-input v-model="formData.__attr__.placeholder" />
        </el-form-item>
        <el-form-item label="最大长度" prop="maxLength">
          <el-input-number
            v-model="formData.__attr__.maxLength"
            :min="0"
            :max="1000"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="可清除" prop="clearable">
          <el-switch v-model="formData.__attr__.clearable" />
        </el-form-item>
        <el-form-item label="是否禁用" prop="disabled">
          <el-switch v-model="formData.__attr__.disabled" />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script lang="ts" setup>
import { FormConfigDiyTextarea } from './config'
import { usePropertyForm } from '../index'

const props = defineProps<{ modelValue: FormConfigDiyTextarea }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
// 表单校验
// 表单校验
const formRules = {
  '__config__.label': [
    { required: true, message: '请输入控件标题', trigger: 'blur' }
  ],
  '__config__.model': [
    { required: true, message: '请输入控件字段', trigger: 'blur' }
  ],
}

const activeCollapse = ['base', 'style', 'property']
</script>
